<template>
    <div>
        <el-form  :model="addtest"  class="demo-form-inline">

            <el-form-item label="年级" :label-width="formLabelWidth">
                <el-select v-model="addtest.grad" placeholder="请选择"  @change="grada">
                  <el-option
                    v-for="item in grade"
                    :value="item.dictValue" 
                    :key="item.dictValue"             
                    :label="item.dictLabel">
                  </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="学科" :label-width="formLabelWidth">
                <el-select v-model="addtest.subjectId" placeholder="请选择" >
                  <el-option                 
                    v-for="item in findData"
                    :value="item.id" 
                    :key="item.id"             
                    :label="item.subject"
                    >
                  </el-option >
                </el-select>              
            </el-form-item>


            <el-form-item label="试卷类型" :label-width="formLabelWidth">
                <el-select v-model="addtest.testType" placeholder="请选择" >
                  <el-option
                    v-for="item in paper"
                    :value="item.dictValue" 
                    :key="item.dictValue"             
                    :label="item.dictLabel">
                  </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="试卷名称" :label-width="formLabelWidth">
              <el-input v-model="addtest.testName"></el-input>
            </el-form-item>

            <el-form-item :label="'标题'+(index+1)" :label-width="formLabelWidth" v-for="(item,index) in TitleList" :key="index">
                  <el-input v-model="item.name" style="width:1000px"></el-input>
                 
                  <el-button   @click="openDialog(index)" type="success" style="margin-left: 50px;">添加题目</el-button>
                  <el-button  @click="TitleList.splice(index,1)"  type="danger" style="margin-left: 15px;">删除</el-button>

                  <el-card class="box-card" v-if="TitleList[index].biaoti.length!==0" style="width: 800px;">
                    <el-form-item v-for="(item,innerIndex) in TitleList[index].biaoti" :key="innerIndex" :label="'题目'+(innerIndex+1)+':'"> {{ item.questionText }}
                        <el-row>
                            <el-col :span="20">
                               <div v-if="item.questions ==0 || item.questions ==1">
                                    A:{{item.optionA }}B:{{item.optionB  }}C:{{ item.optionC }}D:{{ item.optionD }}    正确答案:{{ item.answer }}
                               </div>
                               <div v-if="item.questions ==2">
                                    A:{{item.optionA }}B:{{item.optionB  }}    正确答案:{{ item.answer }}
                               </div>
                               <div v-if="item.questions ==3 || item.questions ==4  ">
                                    {{item.explanation }}    正确答案:{{ item.answer }}
                               </div>
                            </el-col>
                            <el-col :span="4">
                                <el-button  @click="delQuestion(index, innerIndex)"  type="danger">删除</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>

                  </el-card>
                 
            </el-form-item>

            <el-form-item label="建议时长" :label-width="formLabelWidth">
              <el-input-number v-model="addtest.suggestedDuration"  :min="0" :max="10" label="分钟"></el-input-number>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-left: 130px;">
          <el-button type="primary" size="medium" v-if="this.id == null" @click="add()">提 交</el-button>
          <el-button type="primary" size="medium" v-else @click="upData()">提 交</el-button>

          <el-button  @click="reset()" size="medium">重 置</el-button>

          <el-button  @click="addTitle()" type="success" size="medium">添加标题</el-button>
        </div>


        <!-- 添加题目 -->
        <el-dialog  :visible.sync="dialogFormVisible" width="900px" >

            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark">
                  <el-form :inline="true" :model="searchData"  class="demo-form-inline">

                     <el-form-item label="ID">
                       <el-input v-model="searchData.id" clearable></el-input>
                     </el-form-item>                    
                    
                    <el-form-item label="题型" :label-width="formLabelWidth">
                        <el-select v-model="searchData.questions" placeholder="请选择" clearable>
                          <el-option
                            v-for="item in question"
                            :value="item.dictValue" 
                            :key="item.dictValue"             
                            :label="item.dictLabel">
                          </el-option>
                        </el-select>
                    </el-form-item>
                      <el-button type="primary" @click="search">查询</el-button>

                  </el-form>
                  </div></el-col>
            </el-row>
         <el-table :data="BuestionsData" height="240" border @selection-change="handleSelectionChange">
            <!-- 批量 -->
            <el-table-column type="selection" width="55"></el-table-column>

              <el-table-column prop="id" label="Id" width="50"></el-table-column>
             <el-table-column  label="学科" width="120">
                 <template slot-scope="scope">
                  {{ scope.row.discipline }}(
                     <span v-if="scope.row.ade ==0">一年级</span>
                     <span v-if="scope.row.ade ==1">二年级</span>
                     <span v-if="scope.row.ade ==2">三年级</span>
                     <span v-if="scope.row.ade ==3">四年级</span>
                     <span v-if="scope.row.ade ==4">五年级</span>
                     <span v-if="scope.row.ade ==5">六年级</span>
                     <span v-if="scope.row.ade ==6">初一</span>
                     <span v-if="scope.row.ade ==7">初二</span>
                     <span v-if="scope.row.ade ==8">初三</span>
                     <span v-if="scope.row.ade ==9">高一</span>
                     <span v-if="scope.row.ade ==10">高二</span>
                     <span v-if="scope.row.ade ==11">高三</span>
                  )
                 </template>

             </el-table-column>

             <el-table-column prop="questions" label="题型" width="80">
              <template slot-scope="scope">
                      <span v-if="scope.row.questions ==0">单选题</span>
                      <span v-if="scope.row.questions ==1">多选题</span>
                      <span v-if="scope.row.questions ==2">判断题</span>
                      <span v-if="scope.row.questions ==3">填空题</span>
                      <span v-if="scope.row.questions ==4">简单题</span>
                  </template>
             </el-table-column>
             <el-table-column prop="questionText" label="题干" width="553"></el-table-column>
           </el-table>

         <!-- 分页 -->
         <div class="block">
             <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="pageNum"
             :page-sizes="[2, 4, 6, 8]"
             :page-size="pageSize"
             layout="total, sizes, prev, pager, next, jumper"
             :total="total" style="float:right">
             </el-pagination>
         </div>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button  type="primary" @click="AddTopic()">确 定</el-button>

          </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data(){
        return{
            id:'',
            formLabelWidth: '120px', //新增表单宽度
            dialogFormVisible: false, //新增弹窗
            grade:[],
            paper:[],
            findData:[],
            addtest:{
              ids:[],
              titleList:[],
                "createTime": "",
                "disc": "",
                "grad": "",
                "id": 0,
                "subjectId": "",
                "suggestedDuration": 0,
                "testName": "",
                "testType": "",
                "title": 0,
              
            },
            subId:'',
            TitleList:[],
            pageNum:1,
            pageSize:4,
            total:null,
            BuestionsData:[],
            searchData:{
                "id":'',
                "questions":'',
            },
            
            questionList:[],
            idx:0,
           
          
            
        }
    },
    created(){
        this.searchDict()
        this.initTable()
        
        this.id = sessionStorage.getItem("id");
        if(this.id){
          this.getTest()
        

        }
    },
    methods:{

      //修改
      upData(){
        console.log( "拿到的全部数据",this.addtest);
        axios.put("/api/test/updateTest",this.addtest).then(res=>{
          //弹框
          this.$message({
                     message: res.data.message,
                     type: 'success'
                   });
        })
        this.$router.push("/notice")
      },

      //回显
      getTest(){
        axios.get("/api/test/findTestById?id="+this.id).then(res=>{
          this.addtest = res.data.data
          console.log("addTask:", this.addTask);
          // this.searchDict()
          this.TitleList = res.data.data.titleList
          this.subId = res.data.data.grad
          this.Subjec() 
          
        })
        sessionStorage.removeItem("id")
      },

      //新增
      add(){
        this.addtest.titleList = this.TitleList
        console.log( "拿到的全部数据",this.addtest);
  

            axios.post("/api/test/addTest", this.addtest)
            .then(res => {
                //弹框
                 this.$message({
                      message: res.data.message,
                      type: 'success'
                    });
                })  
                this.$router.push("/notice")       
      },
      
        

        //打开添加题目
        openDialog(index){
            this.idx = index;
            this.dialogFormVisible=true;
            this.searchDict();
            this.initTable();
            
        },
        //添加题目
        AddTopic(){
          this.TitleList[this.idx].biaoti = this.questionList;
            this.dialogFormVisible=false
           
        },
        //删除题目
        delQuestion(index, innerIndex){
            console.log("i:", index)
            console.log("index:", innerIndex)
            this.TitleList[index].biaoti.splice(innerIndex,1)
        },
        //多选
        handleSelectionChange(val){
            this.addtest.ids = val.map(item =>item.id)
            //this.questionList = val
            this.questionList = val        
        },
        //添加标题
        addTitle(){
            this.TitleList.push({
              name:'',
                biaoti:[]
            })
            
        },

        //查询题目
        initTable(){
            axios.post("/api/buestions/findTbBuestionsPaginationList?pageNum=" + this.pageNum + "&pageSize=" +this.pageSize,this.searchData)
                .then(res=>{
                    this.BuestionsData = res.data.data.items
                    this.total = res.data.data.totalElements                 
                })
        },
        //分页
        handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.initTable();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
           this.initTable()
        },
        search(){
            this.initTable()
        },
        

        //判断学科
        grada(val){
          this.subId = val  
          this.Subjec()         
        },
        //学科
        Subjec(){
            axios.get("/api/subject/SubjectList?id="+this.subId).then(res=>{
                this.findData = res.data.data
            })
        },
        //重置
        reset(){
            this.getList={}
        },
        //年级
        searchDict(){
            axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_grade_status").then(res=>{
            this.grade =res.data.data
            })
            //试卷类型
            axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_test_type").then(res=>{
            this.paper =res.data.data
            })
            axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_question_type").then(res=>{
            this.question =res.data.data
            })
        },

    }
}
</script>

<style scoped>

</style>